<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>普通价: {{price}}</h1>
      <hr>
      <h1>会员价: {{memberPrice}}</h1>
      <hr>
      <h1>VIP价: {{vipPrice}}</h1>
    </div>

    <script src="../js/vue.js"></script>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            price: 5,
            vipPrice:0
          }
        },
        computed:{
          memberPrice(){
            return this.price *0.8;
          }
        },
        //侦听器
        watch:{
          price(current, old){
            console.log(current, old);
            

            setTimeout(() => {
              this.vipPrice = this.price*0.5;
            }, 2000);

          }
        }
      }).mount("#app");
    </script>
  </body>
</html>